<template>
  <div class='m-lesson_classroom'>
    <div style='padding-bottom: 20px;'>
      <el-button type='primary' @click='add'>添加教室</el-button>
    </div>
    <a-table :data='data' :cols='tableKeys'>
      <el-table-column align="center" label="操作" width='180' slot='ahead'>
        <template slot-scope="scope">
          <div>
            <el-button size='mini' @click='choose(scope.row.id)'>选择</el-button>
            <el-button size='mini' @click='deleteObj(scope.row.id)'>删除</el-button>
          </div>
        </template>
      </el-table-column>
    </a-table>
    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>

    <el-dialog
      v-loading='ifRequesting'
      :title="isAdd ? '添加教室' : '修改教室'"
      :visible.sync="dialogVisible"
      :before-close="() => {dialogVisible = false}">
      <el-form class="form" ref='form' label-width="120px" :model="form" :rules='rules'>
        <el-form-item label="教室名称：" prop='name'>
          <el-input type="text" placeholder="请输入教室名称" v-model.trim="form.name"></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop='order'>
          <el-input type="number" placeholder="请输入排序号" v-model.trim="form.order"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop='memo'>
          <el-input type="text" placeholder="请重新输入备注" v-model.trim="form.memo"></el-input>
        </el-form-item>
        <el-form-item align='right'>
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button type="primary" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'm-lesson_classroom',

  data() {
    return {
      tableKeys: [
        { prop: 'name', label: '教室名称', width: '140' },
        { prop: 'order', label: '排序', minWidth: '130' },
        { prop: 'memo', label: '备注', minWidth: '130' }
      ],
      data: [],
      ifRequesting: false,
      selectId: '',
      form: {
        name: '',
        order: '',
        memo: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入教室名称', trigger: 'blur' },
          { min: 2, message: '长度至少 2 个字符', trigger: 'blur' }
        ],
        order: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        memo: [
          { required: true, message: '请输入备注', trigger: 'blur' },
          { min: 2, message: '长度至少 2 个字符', trigger: 'blur' }
        ]
      },
      isAdd: true,
      dialogVisible: false
    }
  },

  mounted() {
    this.$refs.page.changePage()
  },

  methods: {
    async fetchData(aPageNum, aPageSize) {
      return this.$api.courseGetRooms({
        aMerchantId: this.aFirmId,
        aPageNum,
        aPageSize
      })
    },

    getData(data) {
      this.data = data
    },

    add() {
      this.reset()
      this.isAdd = true
      this.dialogVisible = true
    },

    confirm() {
      if (this.ifRequesting) return
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        const { name, order, memo } = this.form
        this.ifRequesting = true
        const { code } = await this.$api[this.isAdd ? 'courseCreateRooms' : 'courseModifyRooms']({
          aMerchantId: this.aFirmId,
          aName: name,
          aOrder: order,
          aMemo: memo,
          aId: this.selectId || ''
        })
        this.ifRequesting = false
        if (code === 0) {
          this.dialogVisible = false
          this.$refs.page.changePage()
          this.reset()
          this.selectId = ''
          this.isAdd = true
        }
      })
    },

    cancel() {
      this.dialogVisible = false
    },

    async getDetail(id) {
      this.ifRequesting = true
      const { code, data } = await this.$api.courseGetRoomInfo({
        aId: id
      })
      this.ifRequesting = false
      if (code === 0) {
        this.form.name = data.name
        this.form.order = data.order
        this.form.memo = data.memo
      }
    },

    choose(id) {
      this.isAdd = false
      this.selectId = id
      this.dialogVisible = true
      this.reset()
      this.getDetail(id)
    },

    deleteObj(id) {
      if (this.ifRequesting) return false
      this.__messageBox({
        title: '你确认要删除该教室吗？',
        successCallback: async () => {
          this.ifRequesting = true
          const { code } = await this.$api.courseDeleteRooms({ aId: id })
          this.ifRequesting = false
          this.$refs.page.changePage()
          return code
        }
      })
    },

    reset() {
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
    }
  }
}
</script>

<style lang='less'>

</style>